<template>
  <div class="login">
    <input type="file" ref="uploadInput" />
    <img :src="image" :alt="imageName" />
    <button @click="upload()">生成</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      image: null,
      imageName: "imgName",
    };
  },
  methods: {
    async upload() {
      const formData = new FormData();
      formData.append("img", this.$refs.uploadInput.files[0]);
      const requestPayload = {
        method: "post",
        url: "/handle",
        headers: {
          "Content-Type": "multipart/form-data;",
        },
        data: formData,
      };
      try {
        // 发起请求
        const data = await this.$axios(requestPayload);
        console.log(data);
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

<style lang='less' scoped>
.login {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  button,
  input {
    margin: 15px 0;
    padding: 10px;
    box-sizing: border-box;
    width: 25vw;
    font-size: 14px;
    max-width: 335px;
    min-width: 200px;
    border-radius: 5px;
  }
  input:focus {
    border: 1px solid #1890ff;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
      0 0 8px rgba(102, 175, 233, 0.6);
  }
  button {
    font-size: 15px;
    color: #ffffff;
    background-color: #419cf1;
  }

  button:hover {
    cursor: pointer;
    background: #0285ff;
    border-color: #0285ff;
    color: #ffffff;
  }
}
</style>